<template>
  <div class="index">
    <div class="bw3"></div>
    <div class="bw2"></div>
    <div class="bw1">
      <div class="uploadImg" @click="goImgTabs">
        <img src="../../assets/images/index/1.png" />
        <div class="uploadImgTxt">上传图片</div>
      </div>
      <div class="uploadMov" @click="goMovTabs">
        <img src="../../assets/images/index/2.png" />
        <div class="uploadMovTxt">上传视频</div>
      </div>
    </div>
  </div>
</template>

<script>
import index1 from '../../assets/images/index/1.png'
import index2 from '../../assets/images/index/2.png'
import index3 from '../../assets/images/index/3.png'
// 火箭火焰动画
import img1 from '../../assets/images/upload/1.png'
import img2 from '../../assets/images/upload/小.png'
import img3 from '../../assets/images/upload/中.png'
import img4 from '../../assets/images/upload/大.png'
// 上传加号+
import img5 from '../../assets/images/localMov/2.png'
// 网页图片切换图标
import img6 from '../../assets/images/netImg/1.png'
import img7 from '../../assets/images/netImg/2.png'
import img8 from '../../assets/images/netImg/3.png'
// 绘画板
import img9 from '../../assets/images/drawing/画笔宽度 未选中.png'
import img10 from '../../assets/images/drawing/画笔颜色未选中.png'
import img11 from '../../assets/images/drawing/橡皮擦 未选中.png'
import img12 from '../../assets/images/drawing/保存 未选中.png'
import img13 from '../../assets/images/drawing/3 清除画布.png'
import img14 from '../../assets/images/drawing/画笔宽度1.png'
import img15 from '../../assets/images/drawing/画笔宽度2.png'
import img16 from '../../assets/images/drawing/画笔宽度3.png'
import img17 from '../../assets/images/drawing/画笔宽度4.png'
import img18 from '../../assets/images/drawing/橡皮擦1.png'
export default {
  name: 'index',
  data () {
    return {
      uploadImg: '上传图片',
      uploadMov: '上传视频',
      images: [],
      preloads: [index1, index2, index3, img1, img2, img3, img4, img5, img6, img7, img8, img9, img10, img11, img12, img13, img14, img15, img16, img17, img18]
    }
  },
  created () {
    this.preload()
  },
  methods: {
    preload () {
      for (var i = 0; i < this.preloads.length; i++) {
        this.images[i] = new Image()
        this.images[i].src = this.preloads[i]
      }
    },

    goImgTabs () {
      this.$router.push('/imgTabs')
    },
    goMovTabs () {
      this.$router.push('/movTabs')
    }
  }
}
</script>

<style scoped>
.index {
  background-image: url("../../assets/images/index/3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #f5f5f5;
  height: 100%;
  width: 750px;
  position: absolute;
  display: flex;
  justify-content: center;
}
.bw1 {
  width: 600px;
  height: 760px;
  border-radius: 20px;
  background-color: #ffffff;
  position: absolute;
  top: 442px;
  box-shadow: 3px 3px 3px rgba(9, 7, 155, 0.14);
  display: flex;
  flex-direction: column;
}
.bw2 {
  width: 566px;
  height: 760px;
  border-radius: 20px;
  background-color: #ffffff;
  position: absolute;
  top: 412px;
  opacity: 0.46;
}
.bw3 {
  width: 526px;
  height: 760px;
  border-radius: 20px;
  background-color: #ffffff;
  position: absolute;
  top: 382px;
  opacity: 0.16;
}
.uploadImg {
  height: 290px;
  width: 210px;
  margin: 0 auto;
  margin-top: 40px;
}
.uploadImg img {
  width: 210px;
}
.uploadImgTxt {
  margin-top: 18px;
  font-size: 32px;
  font-family: "思源黑体";
  color: #333333;
  text-align: center;
}
.uploadMov {
  height: 290px;
  width: 210px;
  margin: 0 auto;
  margin-top: 53px;
}
.uploadMov img {
  width: 210px;
}
.uploadMovTxt {
  margin-top: 18px;
  font-size: 32px;
  font-family: "思源黑体";
  color: #333333;
  text-align: center;
}
</style>
